<template id="all">
  <div class="app-container">
    <div class="app-container">
      <el-form :inline="true" :model="attendance" class="demo-form-inline">
        <el-form-item label="考勤日期">
          <el-date-picker
            v-model="attendance.create_date"
            type="date"
            placeholder="选择日期"
            lable="选择日期"
          />
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input
            v-model="attendance.user.account"
            placeholder="输入姓名"
          />
        </el-form-item>
        <el-form-item label="考勤状态">
          <el-select v-model="attendance.status" placeholder="考勤状态">
            <el-option label="全部" value="" />
            <el-option label="正常" value="y" />
            <el-option label="异常" value="xz" />
            <el-option label="缺勤" value="x" />
            <el-option label="旷工" value="z" />
            <el-option label="休假" value="v" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container">
      <el-table :data="Attendances" border style="width: 100%">
        <el-table-column prop="user.account" label="姓名" style="width: 10%" />
        <el-table-column prop="create_date" label="日期" style="width: 20%" />
        <el-table-column prop="sign_in" label="签到时间" style="width: 20%" />
        <el-table-column prop="sign_out" label="签退时间" style="width: 20%" />

        <el-table-column prop="status" label="状态" style="width: 20%" />
        <el-table-column label="操作" style="width: 10%">
          <template slot-scope="scope">
            <el-button
              type="text"
              :disabled="isdisabled(scope.row)"
              @click="handleClick(scope.$index,scope.row)"
            >补卡</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { getAll, RecordSelect, Supplementary } from '@/api/authendance'
export default {
  data() {
    return {
      sign_in: '',
      sign_out: '',
      Attendances: [],
      attendance: {
        create_date: null,
        user: {
          account: null
        },
        status: null
      }
    }
  },

  created: function() {
    const that = this
    getAll().then(function(re) {
      that.Attendances = re.data

      that.change()
    })
  },
  methods: {
    onSubmit() {
      const that = this
      if (this.attendance.create_date != null) {
        this.attendance.create_date =
          this.attendance.create_date.toLocaleDateString()
      }
      RecordSelect(this.attendance).then(function(re) {
        that.Attendances = re.data
        that.change()
      })
    },
    change() {
      const att = this.Attendances
      JSON.parse(JSON.stringify(att)).forEach(function(e, i) {
        let d = new Date(e.create_date)
        att[i].create_date = d.toLocaleDateString()
        d = new Date(e.sign_in)
        if (d.toLocaleString() === '1970/1/1 上午8:00:00') {
          att[i].sign_in = '缺卡'
        } else {
          att[i].sign_in = d.toLocaleString()
        }
        d = new Date(e.sign_out)
        if (d.toLocaleString() === '1970/1/1 上午8:00:00') {
          att[i].sign_out = '缺卡'
        } else {
          att[i].sign_out = d.toLocaleString()
        }
        if (e.status === 'y') {
          att[i].status = '正常'
        } else if (e.status === 'x') {
          att[i].status = '缺勤'
        } else if (e.status === 'z') {
          att[i].status = '旷工'
        } else if (e.status === 'v') {
          att[i].status = '休假'
        } else if (e.status === 's') {
          att[i].status = '补卡'
        }
      })
    },
    handleClick(index, row) {
      this.sign_in = row.sign_in
      row.sign_in = null
      this.sign_out = row.sign_out
      row.sign_out = null
      const that = this
      Supplementary(row).then(function(re) {
        that.Attendances[index].status = 's'
        that.Attendances[index].sign_in = that.sign_in
        that.Attendances[index].sign_out = that.sign_out
        that.change()
        that.$message({
          message: '补卡成功',
          type: 'success'
        })
      })
      // console.log(row);
    },
    isdisabled(row) {
      if (row.status === '缺勤' || row.status === '旷工') {
        return false
      } else {
        return true
      }
    }
  }
}
</script>
